<template>
  <div class="box">
    <!-- part2-两制度-->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin: 0 auto; width: 90%"
    >
      <el-form-item label="年级:">
        <el-select v-model="firstGrade" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.grade"
            :label="item.grade"
            :value="item.grade"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="班级:">
        <el-select v-model="firstClass" placeholder="请选择">
          <el-option
            v-for="item in firstOption.classes"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="年份:">
        <el-select v-model="firstYear" placeholder="请选择">
          <el-option
            v-for="item in firstOption.years"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="制度类型:">
        <el-select v-model="firstType" placeholder="请选择">
          <el-option
            v-for="item in firstTypes"
            :key="item.id"
            :label="item.type"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="firstSearch">查询</el-button>
      </el-form-item>
    </el-form>

    <el-form
      :model="form"
      style="margin: 0 auto; width: 95%"
      class="demo-form-inline"
    >
      <h2 style="text-align: center">{{ title1 }}</h2>
      <el-form-item label="内容:" :label-width="formLabelWidth" class="content">
        <el-input
          :readonly="true"
          type="textarea"
          :value="form.content"
          :rows="25"
          style="margin: 0 auto; width: 95%;"
          placeholder="无内容"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.box {
  margin: 0 auto;
  padding: 20px;
}

.el-textarea.is-disabled /deep/ .el-textarea__inner {
  color: black;
  background-color: #f5f7fa;
  border-color: #dfe4ed;
  cursor: not-allowed;
}
</style>

<script>
import { getGradeClassesYears } from "@/api/gradeClassesYears"
import { getRegistration } from '@/api/part2/registration'

export default {
  data() {
    return {
      options: [],
      firstGrade: 2017,
      firstOption: {},
      firstGrade: 2017,
      firstClass: '软件工程1班',
      firstYear: 2020,
      firstType: 0,
      firstTypes: [
        {
          id: 0,
          type: '团员教育评议制度'
        },
        {
          id: 1,
          type: '团员年度团籍注册制度'
        }
      ],
      title1: '2017级软件工程1班团员教育评议评优或处理记录',
      formLabelWidth: '80px',
      form: {
        content: ''
      }
    }
  },
  created: function () {
    //获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options;
      //初始化first
      this.firstGrade = this.options[0].grade;
      let grade = this.firstGrade;
      this.firstOption = this.options.find(function (x) { return x.grade === grade; })
      this.firstYear = this.options[0].years[0];
      this.firstType = this.firstTypes[0].id;
      this.firstSearch();
    }).catch(err => {
      console.log(err)
    })
  },
  watch: {
    firstGrade: function (val) {
      this.firstOption = this.options.find(function (x) { return x.grade === val; })
      this.firstYear = this.firstOption.years[0];
      this.firstType = this.firstTypes[0].id;
    }
  },
  methods: {
    firstSearch() {//查询一个年级各班对应的数据
      if (this.firstType == 0) {
        this.title1 = this.firstGrade + '级' + this.firstClass + '团员教育评议评优或处理记录';
      } else {
        this.title1 = this.firstGrade + '级' + this.firstClass + '本学年注册情况记录';
      }
      let user = this.firstGrade + "级" + this.firstClass + "团支部";
      let data = {
        user: user,
        year: this.firstYear,
        type: this.firstType
      };
      getRegistration(data).then(response => {
        // console.log('得到的response2：');
        if (response.isOK == 1) {
          if (response.data == null) {
            this.form.content = response.data;
          } else {
            this.form.content = response.data.content;
          }
        }
      }).catch(err => {
        console.log(err);
      })
    }
  }
}
</script>